import {useDispatch} from 'react-redux';
import {loadCameraConfigCreator} from '../../store/camera/cameraAction';
import Button from '../Button';
import React, {useRef} from 'react';
import {Text, View, TextInput, StyleSheet, Switch} from 'react-native';
import {useUpdate} from 'ahooks';
import {
  changeLightThreshold,
  changeScreenOff,
} from '../../store/setting/settingAction';

interface ConfigScreenProps {
  navigation: any;
}
const ConfigScreen: React.FC<ConfigScreenProps> = ({navigation}) => {
  const dispatch = useDispatch();
  let update = useUpdate();
  const lightThreshold = useRef('20');
  const screenOff = useRef('20');
  const zoom = useRef('0');
  const useFontCamera = useRef(false);
  const ratio43 = useRef(false);
  return (
    <View style={{padding: 15}}>
      <View style={styles.row}>
        <Text>亮度校准：</Text>
        <TextInput
          style={styles.input}
          onChangeText={s => {
            lightThreshold.current = s;
            update();
            dispatch(changeLightThreshold(s));
          }}
          value={lightThreshold.current}
          placeholder="亮度参数校准"
          keyboardType="numeric"
        />
      </View>
      <View style={styles.row}>
        <Text>熄屏间隔：</Text>
        <TextInput
          style={styles.input}
          onChangeText={s => {
            screenOff.current = s;
            update();
            dispatch(changeScreenOff(s));
          }}
          value={screenOff.current}
          placeholder="熄屏时间"
          keyboardType="numeric"
        />
        <Text> s</Text>
      </View>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text>相机缩放：</Text>
        <TextInput
          style={styles.input}
          onChangeText={s => {
            zoom.current = s;
            update();
            dispatch(loadCameraConfigCreator({zoom: zoom.current}));
          }}
          value={zoom.current}
          placeholder="相机缩放"
          keyboardType="numeric"
        />
      </View>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={{width: 100}}>后置摄像头</Text>
        <Switch
          style={styles.switch}
          value={useFontCamera.current}
          onValueChange={value => {
            useFontCamera.current = value;
            update();
            if (value) {
              dispatch(loadCameraConfigCreator({type: 'front'}));
            } else {
              dispatch(loadCameraConfigCreator({type: 'back'}));
            }
          }}
        />
        <Text style={{width: 100}}>前置摄像头</Text>
      </View>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={{width: 100}}>4:3</Text>
        <Switch
          style={styles.switch}
          value={ratio43.current}
          onValueChange={value => {
            ratio43.current = value;
            update();
            if (value) {
              dispatch(loadCameraConfigCreator({ratio: '4:3'}));
            } else {
              dispatch(loadCameraConfigCreator({ratio: '16:9'}));
            }
          }}
        />
        <Text style={{width: 100}}>16:9</Text>
      </View>

      <Button
        onPress={() => {
          navigation.goBack();
        }}>
        go to config
      </Button>
    </View>
  );
};
const styles = StyleSheet.create({
  input: {
    height: 40,
    width: 200,
    padding: 6,
    borderWidth: 1,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  switch: {
    height: 40,
  },
});
export default ConfigScreen;
